<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Menus and toolbars in Qt4</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Menus, Toolbars, Qt4 library, C++">
<meta name="description" content="In this part of the Qt4 tutorial, we will
work with menus and toolbars.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5536206-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Menus and toolbars in Qt4</h1>

<p>
In this part of the Qt4 C++ programming tutorial, we will talk about 
menus and toolbars in Qt4 applications.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
A menubar is one of the most visible parts of the GUI application. It 
is a group of commands located in various menus. Menus group commands that 
we can use in an application. Toolbars provide 
a quick access to the most frequently used commands. 
</p>


<h2>Simple menu</h2>

<p>
The first example will show a simple menu. 
</p>

<div class="codehead">simplemenu.h</div>
<pre class="code">
#ifndef SIMPLEMENU_H
#define SIMPLEMENU_H

#include &lt;QMainWindow&gt;
#include &lt;QApplication&gt;

class SimpleMenu : public QMainWindow
{
  public:
    SimpleMenu(QWidget *parent = 0);
 
};

#endif
</pre>

<p>
This is a header file for our code example.
</p>

<div class="codehead">simplemenu.cpp</div>
<pre class="code">
#include "simplemenu.h"
#include &lt;QMenu&gt;
#include &lt;QMenuBar&gt;


SimpleMenu::SimpleMenu(QWidget *parent)
    : QMainWindow(parent)
{
  QAction *quit = new QAction("&amp;Quit", this);

  QMenu *file;
  file = menuBar()->addMenu("&amp;File");
  file->addAction(quit);

  connect(quit, SIGNAL(triggered()), qApp, SLOT(quit()));
}
</pre>

<p>
We have a menubar, a menu and an action. In order to work with menus, 
we must inherit from <code>QMainWindow</code> widget. 
</p>


<pre class="explanation">
QAction *quit = new QAction("&amp;Quit", this);
</pre>

<p>
This code line creates a <code>QAction</code>. Each 
<code>QMenu</code> has one or more action objects.
</p>

<pre class="explanation">
QMenu *file;
file = menuBar()->addMenu("&amp;File");
</pre>

<p>
We create a <code>QMenu</code> object. 
</p>

<pre class="explanation">
file->addAction(quit);
</pre>

<p>
We put an action inside the menu. 
</p>

<pre class="explanation">
connect(quit, SIGNAL(triggered()), qApp, SLOT(quit()));
</pre>

<p>
When we select this option from the menu, the application quits. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "simplemenu.h"


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  SimpleMenu window;

  window.resize(250, 150);
  window.move(300, 300);
  window.setWindowTitle("Simple menu");
  window.show();

  return app.exec();
}
</pre>

<p>
The main file.
</p>


<img src="/img/gui/qt4/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>


<h2>Icons, shortcuts and separators</h2>

<p>
In the following example, we will further enhance our previous application. 
We will add icons to the menus, use shortcuts and a separator.  
</p>

<div class="codehead">anothermenu.h</div>
<pre class="code">
#ifndef ANOTHERMENU_H
#define ANOTHERMENU_H

#include &lt;QMainWindow&gt;
#include &lt;QApplication&gt;

class AnotherMenu : public QMainWindow
{
  public:
    AnotherMenu(QWidget *parent = 0);
 
};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">anothermenu.cpp</div>
<pre class="code">
#include "anothermenu.h"
#include &lt;QMenu&gt;
#include &lt;QMenuBar&gt;


AnotherMenu::AnotherMenu(QWidget *parent)
    : QMainWindow(parent)
{  
  QPixmap newpix("new.png");
  QPixmap openpix("open.png");
  QPixmap quitpix("quit.png");

  QAction *newa = new QAction(newpix, "&amp;New", this);
  QAction *open = new QAction(openpix, "&amp;Open", this);
  QAction *quit = new QAction(quitpix, "&amp;Quit", this);
  quit->setShortcut(tr("CTRL+Q"));

  QMenu *file;
  file = menuBar()->addMenu("&amp;File");
  file->addAction(newa);
  file->addAction(open);
  file->addSeparator();
  file->addAction(quit);

  connect(quit, SIGNAL(triggered()), qApp, SLOT(quit()));
}
</pre>

<p>
In our example, we have one menu with three actions. Only the 
quit action will actually do something, if we select it.
We also create a separator and a <code>CTRL+Q</code> shortcut, which 
will terminate the application. 
</p>

<pre class="explanation">
QPixmap newpix("new.png");
QPixmap openpix("open.png");
QPixmap quitpix("quit.png");
</pre>

<p>
These are images that we will use in menus. Note that some desktop environments
might not display images in the menus.
</p>

<pre class="explanation">
QAction *newa = new QAction(newpix, "&amp;New", this);
QAction *open = new QAction(openpix, "&amp;Open", this);
QAction *quit = new QAction(quitpix, "&amp;Quit", this);
</pre>

<p>
In this code we use the  <code>QAction</code> constructor 
with a pixmap as the first argument. 
</p>

<pre class="explanation">
quit->setShortcut(tr("CTRL+Q"));
</pre>

<p>
Here we create a keyboard shortcut. By pressing this shortcut, we 
will run the quit action which will quit the application. 
</p>

<pre class="explanation">
file->addSeparator();
</pre>

<p>
We create a separator. The separator is a horizontal line which enables 
us to group menu actions into some logical groups. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "anothermenu.h"


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  AnotherMenu window;

  window.resize(350, 200);
  window.move(300, 300);  
  window.setWindowTitle("Another menu");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file.
</p>

<img src="/img/gui/qt4/anothermenu.png" alt="Another menu example">
<div class="figure">Figure: Another menu example</div>


<h2>Checkable menu</h2>

<p>
In the next example, we will create a checkable menu. This will 
be an action with a check box. The option will toggle the visibility 
of a statusbar. 
</p>

<div class="codehead">checkable.h</div>
<pre class="code">
#ifndef CHECKABLE_H
#define CHECKABLE_H

#include &lt;QMainWindow&gt;
#include &lt;QApplication&gt;

class Checkable : public QMainWindow
{
  Q_OBJECT  

  public:
    Checkable(QWidget *parent = 0);
 
  private slots:
    void toggleStatusbar();

  private:
    QAction *viewst;

};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">checkable.cpp</div>
<pre class="code">
#include "checkable.h"
#include &lt;QMenu&gt;
#include &lt;QMenuBar&gt;
#include &lt;QStatusBar&gt;


Checkable::Checkable(QWidget *parent)
    : QMainWindow(parent)
{

  viewst = new QAction("&amp;View statusbar", this);
  viewst->setCheckable(true);
  viewst->setChecked(true);

  QMenu *file;
  file = menuBar()->addMenu("&amp;File");
  file->addAction(viewst);
  
  statusBar();
  
  connect(viewst, SIGNAL(triggered()), this, 
    SLOT(toggleStatusbar()));

}

void Checkable::toggleStatusbar()
{
  if (viewst->isChecked())
    statusBar()->show();
  else
    statusBar()->hide();
}
</pre>

<p>
A checkable menu item will toggle the visibility of the
statusbar. 
</p>

<pre class="explanation">
viewst = new QAction("&amp;View statusbar", this);
viewst->setCheckable(true);
viewst->setChecked(true);
</pre>

<p>
We create an action. Make it checkable with the 
<code>setCheckable()</code> method. Then we make it checked. 
</p>

<pre class="explanation">
if (viewst->isChecked())
  statusBar()->show();
else
  statusBar()->hide();
</pre>

<p>
Inside the <code>toggleStatusbar()</code> method, we determine 
if the menu item is checked. And we hide or show the
statusbar accordingly. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "checkable.h"

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Checkable window;

  window.resize(250, 150);
  window.move(300, 300);
  window.setWindowTitle("Checkable menu");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file.
</p>


<img src="/img/gui/qt4/checkable.png" alt="Checkable menu">
<div class="figure">Figure: Checkable menu</div>


<h2>QToolBar</h2>

<p>
The <code>QToolBar</code> class provides a movable panel 
that contains a set of controls which provide a quick
access to the application actions. 
</p>

<div class="codehead">toolbar.h</div>
<pre class="code">
#ifndef TOOLBAR_H
#define TOOLBAR_H

#include &lt;QMainWindow&gt;
#include &lt;QApplication&gt;

class Toolbar : public QMainWindow
{
  Q_OBJECT  

  public:
    Toolbar(QWidget *parent = 0);

};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">toolbar.cpp</div>
<pre class="code">
#include "toolbar.h"
#include &lt;QToolBar&gt;
#include &lt;QIcon&gt;
#include &lt;QAction&gt;


Toolbar::Toolbar(QWidget *parent)
    : QMainWindow(parent)
{
  QPixmap newpix("new.png");
  QPixmap openpix("open.png");
  QPixmap quitpix("quit.png");
  
  QToolBar *toolbar = addToolBar("main toolbar");
  toolbar->addAction(QIcon(newpix), "New File");
  toolbar->addAction(QIcon(openpix), "Open File");
  toolbar->addSeparator();
  QAction *quit = toolbar->addAction(QIcon(quitpix), 
      "Quit Application");
  
  connect(quit, SIGNAL(triggered()), qApp, SLOT(quit()));
}
</pre>

<p>
To create a toolbar, we inherit from the <code>QMainWindow</code> widget. 
</p>

<pre class="explanation">
QToolBar *toolbar = addToolBar("main toolbar");
</pre>

<p>
The <code>addToolBar()</code> method creates a 
toolbar and returns a pointer to it. 
</p>

<pre class="explanation">
toolbar->addAction(QIcon(newpix), "New File");
toolbar->addAction(QIcon(openpix), "Open File");
toolbar->addSeparator();
</pre>

<p>
Here we add two actions and a separator to the toolbar. 
</p>


<div class="codehead">main.cpp</div>
<pre class="code">
#include "toolbar.h"

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Toolbar window;

  window.resize(300, 200);
  window.move(300, 300);  
  window.setWindowTitle("QToolBar");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file.
</p>


<img src="/img/gui/qt4/toolbar.png" alt="QToolBar">
<div class="figure">Figure: QToolBar</div>


<h2>Application skeleton</h2>

<p>
In the end of this part of the C++ Qt4 tutorial, we will create an 
application skeleton. The example is based mainly on the
<code>QMainWindow</code> widget. 
</p>

<div class="codehead">skeleton.h</div>
<pre class="code">
#ifndef SKELETON_H
#define SKELETON_H

#include &lt;QMainWindow&gt;
#include &lt;QApplication&gt;

class Skeleton : public QMainWindow
{
  Q_OBJECT  

  public:
    Skeleton(QWidget *parent = 0);

};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">skeleton.cpp</div>
<pre class="code">
#include "skeleton.h"
#include &lt;QToolBar&gt;
#include &lt;QIcon&gt;
#include &lt;QAction&gt;
#include &lt;QMenu&gt;
#include &lt;QMenuBar&gt;
#include &lt;QStatusBar&gt;
#include &lt;QTextEdit&gt;


Skeleton::Skeleton(QWidget *parent)
    : QMainWindow(parent)
{
  QPixmap newpix("new.png");
  QPixmap openpix("open.png");
  QPixmap quitpix("quit.png");

  QAction *quit = new QAction("&amp;Quit", this);

  QMenu *file;
  file = menuBar()-&gt;addMenu("&amp;File");
  file-&gt;addAction(quit);

  connect(quit, SIGNAL(triggered()), qApp, SLOT(quit()));
  
  QToolBar *toolbar = addToolBar("main toolbar");
  toolbar-&gt;addAction(QIcon(newpix), "New File");
  toolbar-&gt;addAction(QIcon(openpix), "Open File");
  toolbar-&gt;addSeparator();
  
  QAction *quit2 = toolbar-&gt;addAction(QIcon(quitpix), 
      "Quit Application");
  connect(quit2, SIGNAL(triggered()), qApp, SLOT(quit()));

  QTextEdit *edit = new QTextEdit(this);  

  setCentralWidget(edit);

  statusBar()-&gt;showMessage("Ready");
}
</pre>

<p>
Here we create a menu a toolbar and a statusbar. 
</p>

<pre class="explanation">
QTextEdit *edit = new QTextEdit(this);  

setCentralWidget(edit);
</pre>

<p>
We create a <code>QTextEdit</code> widget and place it 
into the central part of the <code>QMainWindow</code> widget. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "skeleton.h"

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Skeleton window;

  window.resize(350, 250);
  window.move(300, 300);  
  window.setWindowTitle("Application skeleton");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file.
</p>

<img src="/img/gui/qt4/skeleton.png" alt="Application skeleton">
<div class="figure">Figure: Application skeleton</div>

<p>
In this part of the Qt4 tutorial, we have covered menus and toolbars.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 23, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div>  <!-- content -->

</div>  <!-- container -->

</body>
</html>
